<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Timeline</title>
</head>

<body>
  <div class="timeline__container">
    <div class="timeline__name">
      时间线
    </div>

    <hr />

    <div>
      <ul>
        <li class="title">
          2022-01-17 16:26:53
        </li>
        <li>1-1</li>
        <li>2-2</li>
        <li>3-3</li>
        <li class="title">
          2022-01-18 11:03:46
        </li>
        <li>
          <blockquote>
            <p>相鼠有皮，人而无仪！人而无仪，不死何为？</p>
            <p>相鼠有齿，人而无止！人而无止，不死何俟？</p>
            <p>相鼠有体，人而无礼！人而无礼，胡不遄死？</p>
          </blockquote>
        </li>
        <li>1-1</li>
        <li>3-3</li>
        <li class="title">
          2022-01-18 15:03:16
        </li>
        <li>1-1</li>
        <li>2-2</li>
    </div>

  </div>

  <style>
    :root {
      display: flex;
      justify-content: center;
      background-color: #f4f5f5;

      --indent: 16px;
      --color: #000;
      --bg-color: #fff;
      --primary-color: #409eff;
    }

    ul,
    li {
      list-style: none;
    }

    ul {
      padding-inline-start: 0;
      border-left: 1px solid var(--primary-color);
    }

    .timeline__container {
      width: 480px;
      background-color: var(--bg-color);
      color: var(--color);
      padding: 16px;
      position: relative;
    }

    li {
      position: relative;
    }

    li:not(.title) {
      background-color: var(--primary-color);
      display: block;
      margin: 4px;
      padding: 4px 16px;
      transition: left .5s linear;
      left: -16px;
    }

    li:not(.title):hover {
      left: 0px;
    }

    li.title::before {
      content: "";
      position: absolute;
      left: -9px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: var(--primary-color);
    }

    li.title {
      padding-inline-start: var(--indent);
    }

  </style>
</body>

</html>
